<template>
  <div
    class="viewer"
    ref="viewerContainer" />
</template>

<script setup lang="ts">
import { Viewer } from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
import { MarkersPlugin } from "photo-sphere-viewer/dist/plugins/markers";
import { onMounted, ref } from 'vue';

const viewerContainer = ref<HTMLElement>()
onMounted(() => {
  if(!viewerContainer.value)
    return
  const viewer = new Viewer({
    container: viewerContainer.value,
    panorama: '/public/static/img/abaeb80c9cde4e8baccb8106134005a6.jpg',
    navbar: undefined,
    plugins: [
      [
        MarkersPlugin,
        {
          markers: [
            {
              id: "image",
              width: 50,
              height: 50,
              longitude: 0,
              latitude: 0,
              anchor: "bottom center",
              html: 'hello'
            },
          ],
        },
      ]
    ]
  })
  const markersPlugin = viewer.getPlugin(MarkersPlugin);
  markersPlugin?.on('select-marker', (e, marker) => {
    console.log(marker.id)
  })
})
</script>

<style scoped>
.viewer{
  width: 100%;
  height: 100vh;
}
</style>